<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.prototype.$car ="思域";
        const Count =Vue.extend({
            name:"Count",
            data(){
                return{
                    count:1,
                };
            },
            template:`
                <div>
                    <h1>{{count}}</h1>
                    <button @click="count++">累加</button>
                    <button @click="test">测试的</button>
                </div>
            `,
                methods: {
                    test(){
                        console.log(this.$car);
                    },
                },
        });

  
            const Person =Vue.extend({
                name:"Person",
                data(){
                    return{
                        name:"小明",
                        age:20,
                    };
                },
                template:`<button @click="test">测试</button>`,
                methods:{
                    test(){
                        console.log(this.$car);
                    },
                },
            });
            console.log(new Count(),"new Count()是 Count组件实例");
            console.log(
                "向上一级查找，找到当前VueComponent构造函数的原型对象"
            );
            console.log(
                new Count().__proto__,
                "向上一级找到了当前vueComponent构造函数的原型对象"
            );
            console.log(
                new Count().__proto__.__proto__,
                "再向一级找到了Vue的原型对象上"
            );
            console.log(
                new Count().__proto__.__proto__.__proto__,
                "再向上级找到了Object原型对象上"
            );
            console.log(
                new Count().__proto__.__proto__.__proto__.__proto__,
                "再向上一级找到了null"
            );
            /*
             组件实例的原型链：
                Count组件实例--》Count的VueComponent原型对象--》Vue的原型对象--》Object的原型对象—-》null
                student组件实例--》Student的VueComponent原型对象 -》Vue的原型对象--》Object的原型对象--》null
            
            实际使用：
                当我们想要给所有的组件实例扩展一些方法或者属性的时候，我们可以把这个方法和属性添加在Vue的原型对象上
                [[切记，不能添加在VueComponent上，因为不同的组件，不是同个VueComponent，但是Vue只有一个]]    
            */ 
        const vm = new Vue({
            el: '#app',
            components:{
                Count:Count,
                Person:Person,
            },
            data() {
                return {};
            },
            template:`
             <div>
                <Count/>
                <hr/>
                <Person/>
            </div>
            `
        })
    </script>
</body>

</html>